<template>
	<view class="big-box">
		<view class="head">
			<image class="background" :src="src"></image>
			<view class="head-box">
				<view class="hidden-box">
					<view class="hidden-title" v-text="title"></view>
					<view class="hidden-infor">欢迎来到美如画的世界</view>
				</view>
			</view>
			<view class="menu-box" @tap="back">
				<image class="back-left-image" src="../../../static/jingjie/return.png"></image>
				<view class="head-left-title">境界</view>
			</view>

		</view>
		<view class="conent-big-box">
			<view class="menu-tab-box" @tap="changeMenu">
				<view class="menu-kuang" v-for="(item,index) in menuLists" :key="index" :class="{active:menuIndex==index}" @click="selseMenu(index)"
				 v-text="item">
					<view class="active-box" v-if="menuIndex==index"></view>
				</view>
				<!-- <swiper class="swiper-box" :indicator-dots="indicatorDots" :interval="interval" :duration="duration">
					<view class="box" v-for="(item,index) in menuLists" :key="index">
						<swiper-item style="position: relative;" class="menu-kuang"  :class="{active:menuIndex==index}" @click="selseMenu(index)" v-text="item">
							<view class="active-box" v-if="menuIndex==index"></view>
						</swiper-item>
					</view>
				</swiper> -->
			</view>

			<view class="conent-hidden-box" v-if="menuIndex==0">
				<view class="for-box" v-for="(item,index) in datalist" :key="index">
					<myCuriosity :item="item" @moreCurious='moreCurious(item.id)'></myCuriosity>
				</view>
			</view>

			<view class="conent-hidden-box" v-if="menuIndex==1">
				<view class="" v-for="(item1,index1) in RespondList" :key="index1">
					<moreCurious :isImage="isImage" :isVideo="isVideo" :isdel="isdel" @toImgDetail="toImgDetail" @toVideoDetail="toVideoDetail"
					 :item="item1"></moreCurious>
				</view>
			</view>
			<view class="conent-hidden-box" v-if="menuIndex==2">
				<view class="rankingList-big-box">
					<view class="rankingList-box common">
						<view class="rankingList-small-box" v-for="(item,index) in rankingList" :key="index" v-text="item" @tap="selectRanking(index)"
						 :class="{active:rankingIndex==index}"></view>
					</view>
				</view>

				<view class="marginTop" v-if="rankingIndex==0">
					<view class="" v-for="(item2,index2) in RankingList" :key="index2">
						<curiousList @moreCurious="moreCurious(item2.id)" :isShowClass="isShowClass" @toVideoDetails="toVideoDetails"
						 @toImgDetails="toImgDetails" :item="item2"></curiousList>
					</view>
				</view>
				<view class="marginTop" v-if="rankingIndex==1">
					<view class="" v-for="(item2,index2) in RankingList" :key="index2">
						<curiousList @moreCurious="moreCurious(item2.id)" :isShowClass="isShowClass" @toVideoDetails="toVideoDetails"
						 @toImgDetails="toImgDetails" :item="item2"></curiousList>
					</view>
				</view>
				<view class="marginTop" v-if="rankingIndex==2">
					<view class="" v-for="(item2,index2) in RankingList" :key="index2">
						<curiousList @moreCurious="moreCurious(item2.id)" :isShowClass="isShowClass" @toVideoDetails="toVideoDetails"
						 @toImgDetails="toImgDetails" :item="item2"></curiousList>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import myCuriosity from '../../../components/myCuriosity.vue'
	import moreCurious from '../../../components/moreCurious.vue'
	import curiousList from '../../../components/curiousList.vue'
	export default {
		components: {
			moreCurious,
			curiousList,
			myCuriosity
		},
		data() {
			return {
				menuLists: ['好奇', '回应', '排行榜'],
				rankingList: ['周榜', '月榜', '总榜'],
				menuIndex: 0,
				title: '',
				src: '',
				type: '',
				miaoshu: '',
				typeId: '',
				rankingIndex: 0,
				isShowClass: false,
				datalist: [], //好奇数据
				RespondList: [], //回应数据
				RankingList: [], //排行榜数据
				biaoqianList: [] //标签数据
			};
		},
		onLoad(option) {
			console.log(option)
			this.title = option.className;
		},
		onShow() {
			this.getList()
		},
		methods: {
			getList() { //查询标签列表
				var data = {
					1: 1,
				};
				var me = this;
				this.myAjaxNew({
					model: 'news',
					controllerName: 'curiosityclassfiy',
					actionName: 'queryListPage',
					data: data,
					successBack: function(res) {
						me.biaoqianList = res.data.data;
						for (var i = 0; i < me.biaoqianList.length; i++) {
							if (me.title == me.biaoqianList[i].type) {
								me.typeId = me.biaoqianList[i].id
								me.src = me.biaoqianList[i].big_pic
								me.type = me.biaoqianList[i].type
								me.miaoshu = me.biaoqianList[i].type_description
							}
						}
						me.getCuriousList()
						console.log(me.biaoqianList, '标签信息')
					}
				})
			},
			selseMenu(index) {
				this.menuIndex = index
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			selectRanking(index) {
				this.rankingIndex = index
				this.getRankingList(this.rankingIndex)
			},
			toVideoDetails() { //视频详情
				uni.navigateTo({
					url: '../videoDetails/videoDetails'
				})
			},
			toImgDetails() { //图片详情
				uni.navigateTo({
					url: '../ImgDetails/ImgDetails'
				})
			},
			moreCurious(id) { //更多好奇
				uni.navigateTo({
					url: '../moreCurious/moreCurious?id=' + id
				})
			},
			changeMenu() {
				if (this.menuIndex == 0) {
					this.getCuriousList()
				} else if (this.menuIndex == 1) {
					this.getRespondList()
				} else if (this.menuIndex == 2) {
					this.getRankingList(this.rankingIndex)
				}
			},
			getCuriousList() {
				var me = this;
				var data = {
					classfiy: this.typeId,
					oper_id: uni.getStorageSync('user_id'),
					status:1
				}
				this.myAjaxNew({
					model: 'news',
					controllerName: 'curiosity',
					actionName: 'queryListPage',
					data: data,
					successBack: function(res) {
						me.datalist = res.data.data;
						if (me.datalist.length != 0) {
							for (var i = 0; i < me.datalist.length; i++) {
								if (me.datalist[i].viewPointUserInfos && me.datalist[i].viewPointUserInfos.length > 4) {
									me.datalist[i].viewPointUserInfos.length = 4;
								}
							}
						}else{
							uni.showToast({
								title: '暂无数据',
								icon: 'none'
							})
						}

						console.log(me.datalist)
					}
				})
			},
			getRespondList() {
				var me = this;
				var data = {
					classfiy: this.typeId,
					oper_id: uni.getStorageSync('user_id'),
					status:1
				}
				this.myAjaxNew({
					model: 'news',
					controllerName: 'curiosityViewpoint',
					actionName: 'queryListPage',
					data: data,
					successBack: function(res) {
						me.RespondList = res.data.data;
						// 						for (var i = 0; i < me.RespondList.length; i++) {
						// 							me.RespondList[i].map.userInfo = JSON.parse(me.RespondList[i].map.userInfo)
						// 						}
						if (me.RespondList.length == 0) {
							uni.showToast({
								title: '暂无数据',
								icon: 'none'
							})
						}
						console.log(me.RespondList)
					}
				})
			},
			getRankingList(index) {
				var me = this;
				var data = {
					classfiy: this.typeId,
					oper_id: uni.getStorageSync('user_id'),
					status:1
				}
				if (index == 0) {
					this.myAjaxNew({
						model: 'news',
						controllerName: 'curiosity',
						actionName: 'queryWeekRankingListPage',
						data: data,
						successBack: function(res) {
							me.RankingList = res.data.data;
							if (me.RankingList.length == 0) {
								uni.showToast({
									title: '暂无数据',
									icon: 'none'
								})
							}
							console.log(res.data.data)
						}
					})
				} else if (index == 1) {
					this.myAjaxNew({
						model: 'news',
						controllerName: 'curiosity',
						actionName: 'queryMonthRankingListPage',
						data: data,
						successBack: function(res) {
							me.RankingList = res.data.data;
							if (me.RankingList.length == 0) {
								uni.showToast({
									title: '暂无数据',
									icon: 'none'
								})
							}
							console.log(res.data.data)
						}
					})
				} else if (index == 2) {
					this.myAjaxNew({
						model: 'news',
						controllerName: 'curiosity',
						actionName: 'queryHotRankingListPage',
						data: data,
						successBack: function(res) {

							me.RankingList = res.data.data;
							if (me.RankingList.length == 0) {
								uni.showToast({
									title: '暂无数据',
									icon: 'none'
								})
							}
							console.log(me.RankingList);
						}
					})
				}
			}
		},

	}
</script>

<style scoped>
	.big-box {
		width: 100%;
		height: 100%;

	}

	.background {
		width: 100%;
		height: 350upx;
		position: absolute;
		z-index: 1;
	}

	.head {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
	}

	.head-box {
		width: 100%;
		height: 350upx;
		background: rgba(0, 0, 0, .3);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 11;
	}

	.hidden-box {
		width: 100%;
		position: relative;
		top: 160upx;
	}

	.hidden-title {
		width: 100%;
		text-align: center;
		font-size: 48upx;
		font-weight: bold;
		color: white;

	}

	.hidden-infor {
		width: 100%;
		text-align: center;
		font-size: 30upx;
		color: white;
		margin-top: 25upx;
	}

	.menu-box {
		width: 100%;
		/* height: 128upx; */
		padding: 0 24upx;
		padding-top: 55upx;
		position: absolute;
		z-index: 12;
		display: flex;
		align-items: center;
	}

	.menu-box .back-left-image {
		width: 21upx;
		height: 36upx;
	}

	.menu-box .head-left-title {
		font-size: 32upx;
		color: white;
		margin-left: 12upx;
	}

	.conent-big-box {
		position: relative;
		top: 350upx;
	}

	.menu-tab-box {
		position: fixed;
		top: 352upx;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 88upx;
		background-color: white;
		padding: 0 90upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.swiper-box {
		width: 100%;
		height: 88upx;
	}

	.menu-kuang {
		font-size: 36upx;
		color: rgba(153, 153, 153, 1);
		height: 80upx;
		line-height: 80upx;
	}

	.menu-kuang.active {
		color: rgba(70, 206, 207, 1);
	}

	.active-box {
		width: 32upx;
		height: 6upx;
		background: rgba(70, 206, 207, 1);
		border-radius: 3upx;
		margin: auto;
	}

	.conent-hidden-box {
		width: 100%;
		height: auto;
		margin-top: 112upx;
	}

	.left-box {
		display: flex;
		align-items: center;
	}

	.margin {
		display: flex;
		align-items: center;
		margin-top: 25upx;
	}

	.left-box {
		display: flex;
		align-items: center;
	}

	.img-box {
		width: 152upx;
		overflow: hidden;
	}

	.dianzan-img {
		width: 168upx;
		display: flex;
		flex-direction: row;
		padding-left: 15upx;
	}

	.dianzan-img .headImg {

		float: right;
		width: 38upx;
		height: 40upx;
		background: rgba(245, 245, 245, 1);
		border: 1upx solid rgba(70, 206, 207, 1);
		border-radius: 50%;
	}

	.dianzan-num {
		font-size: 24upx;
		color: rgba(102, 102, 102, 1);
		margin-left: 19upx;
	}

	.title {
		font-size: 40upx;
		color: black;
		font-weight: bold;
	}


	.titleContent {
		font-size: 32upx;
		font-family: PingFang-SC-Medium;
		/* font-weight: bold; */
		color: rgba(51, 51, 51, 1);
		margin-left: 13upx;
	}

	.label-kuang {
		width: 78upx;
		height: 32upx;
		border: 1upx solid rgba(204, 204, 204, 1);
		border-radius: 5upx;
		color: rgba(102, 102, 102, 1);
		font-size: 20upx;
		text-align: center;
		line-height: 32upx;
		margin-left: 10upx;
	}

	/**排行榜**/
	.rankingList-big-box {
		width: 100%;
		height: 68upx;
		padding: 0 24upx;
		box-sizing: border-box;
	}

	.rankingList-box {
		width: 100%;
		height: 100%;
		background-color: white;
		border-radius: 10upx;
	}

	.rankingList-box .active:first-child {
		border-radius: 10upx 0 0 10upx;
	}

	.rankingList-box .active:last-child {
		border-radius: 0 10upx 10upx 0;
	}

	.marginTop {
		margin-top: 20upx;
	}

	.rankingList-small-box {
		width: 33.3%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28upx;
		color: rgba(102, 102, 102, 1);
	}

	.rankingList-small-box.active {
		background-color: rgba(70, 206, 207, 1);
		color: white;
	}
</style>
